<template>
  <div class="login-wrap">
    <div class="title-main-container">
      <div class="title-main-container-zh">xxxxxxxx--管理平台</div>
    </div>
    <div class="login-main-container">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="0px"
        class="form"
      >
        <el-form-item class="input-div" prop="username">
          <img alt="" src="../../assets/login/me.png" />
          <input
            type="text"
            id="username"
            v-model="ruleForm.username"
            placeholder="请输入用户名"
          />
        </el-form-item>
        <el-form-item class="input-div margin-top-10" prop="password">
          <img alt="" src="../../assets/login/mima.png" />
          <input
            type="password"
            id="password"
            v-model="ruleForm.password"
            placeholder="请输入密码"
          />
        </el-form-item>
        <el-form-item
          class="input-div margin-top-10"
          style="text-align: right"
          prop="code"
        >
          <img alt="" src="../../assets/login/yanzhengma.png" />
          <input
            type="text"
            id="verifyCode"
            name="verifyCode"
            style="width: 90%; font-size: 100%; text-align: left"
            maxlength="4"
            placeholder="验证码"
            v-model="ruleForm.code"
          />
          <img
            id="validationCode"
            style="
              min-height: 38px;
              position: fixed;
              cursor: pointer;
              border: none;
              width: 120px;
              border-radius: 4px;
              margin-top: -40px;
              margin-left: -120px;
            "
            onclick="changeCode()"
            alt="验证码"
            src="../../assets/login/captcha.jpeg"
          />
        </el-form-item>
        <el-button
          type="button"
          @click="submitForm('ruleForm')"
          id="loginBtn"
          class="login-btn"
          >登录</el-button
        >
      </el-form>
    </div>
    <div class="foot-div">
      <img alt="" src="src/assets/login/small-logo.png" /><span
        >&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</span
      ><span> 2021 版权所有xxxxx科技有限公司</span>
    </div>
  </div>
</template>

<script>
// import CR from '../common/cryption'
// import GLOBAL from '../../../global_variable.js'

export default {
  data: function () {
    return {
      iconDate: "el-icon-lock",
      flag: false,
      ruleForm: {
        username: "",
        password: "",
        code: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      var flag = false;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          flag = true;
        } else {
          flag = false;
        }
      });
      if (flag) {
        sessionStorage.setItem("ms_username", this.ruleForm.username);
        this.$router.push("/");
        var that = this;
      } else {
        // console.log('error submit!!');
        return false;
      }
    },

    view() {
      var password = document.getElementById("password");
      this.flag = !this.flag;
      if (this.flag) {
        password.type = "text";
        this.iconDate = "el-icon-unlock";
      } else {
        password.type = "password";
        this.iconDate = "el-icon-lock";
      }
    },
  },
};
</script>

<style scoped>
.login-wrap {
  width: 100%;
  height: 100%;
  position: fixed;
  background-image: url(../../assets/login/login.jpeg);
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:top;
}

.title-main-container {
  width: 478px;
  height: 37px;
  position: absolute;
  left: 40px;
  top: 30px;
}

.title-main-container .title-main-container-zh {
  font-size: 1.4em;
  font-family: SourceHanSansCN-Bold;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
}

.title-main-container .title-main-container-en {
  font-size: 0.9em;
  font-family: SourceHanSansCN-Bold;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
  text-align-last: justify;
}

.foot-div {
  width: 100%;
  position: fixed;
  bottom: 5px;
  text-align: center;
  font-size: 1em;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
}

.foot-div img {
  height: 22px;
}

img {
  vertical-align: middle;
}

.login-main-container {
  width: 490px;
  height: 430px;
  background: url(/src/assets/login/login-bg.png) no-repeat;
  background-size: 100%, 100%;
  background-color: rgba(255, 255, 255, .7);
  border-radius: 10px;
  position: absolute;
  margin-left: 50%; /*水平居中*/
  left: -260px;
  top: 50%; /*偏移*/
  transform: translateY(-50%);
}

.input-div {
  height: 9.4%;
  min-height: 40px;
  border: 0px;
}

.input-div img {
  position: absolute;
  margin-top: 8px;
  margin-left: 10px;
  width: 22px;
  height: 22px;
}

.input-div input {
  width: 90%;
  height: 100%;
  min-height: 40px;
  border: 1px solid rgba(221, 221, 221, 1);
  border-radius: 6px;
  font-size: 14px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  padding-left: 40px;
}

.margin-top-10 {
  margin-top: 10px;
}

.input-div {
  height: 9.4%;
  min-height: 40px;
  border: 0px;
}

img {
  border: 0;
}

.login-btn {
  border: 0px solid;
  width: 80%;
  height: 15%;
  min-height: 60px;
  background: url(../../assets/login/login-btn.png) no-repeat;
  background-size: 100% 100%;
  font-size: 16px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  margin-top: -5px;
}

input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
select {
  text-transform: none;
}

.login-main-container form {
  width: 73%;
  margin-left: 16%;
  margin-right: 11%;
  margin-top: 20%;
  text-align: center;
}

form {
  display: block;
  margin-top: 0em;
}

button,
select {
  text-transform: none;
}

button {
  overflow: visible;
  background-color: Transparent;
  border-style: none;
}
</style>